<%--
  Created by IntelliJ IDEA.
  User: 86139
  Date: 2021/1/27
  Time: 23:24
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<link rel="stylesheet" type="text/css" href="../static/css/style01.css">
<link rel="stylesheet" type="text/css" href="../pages/style02.css">
<head>
    <title>计分模块</title>
    <script type="text/javascript" src="../static/script/jquery-1.7.2.js" charset="UTF-8"></script>
    <script type="text/javascript">
        $(function () {
            var myDate = new Date();
            var year = myDate.getFullYear();
            var month = myDate.getMonth()+1;
            var date = myDate.getDate();
            var h = myDate.getHours();
            var m = myDate.getMinutes();
            var s = myDate.getSeconds();
            var arr_total = new Array();
            function getNow(s) {
                return s<10? '0'+s:s;
            }
            function winAGame01(){
                $("#game_add_01").click();
                var arr_game_info = [];
                game = game_01+game_02;
                server = serve_player();
                game_arr = arr_game;
                arr_game_info['局数']=game;
                arr_game_info['发球方']=server;
                arr_game_info['比分']=game_arr;
                arr_total.push(arr_game_info);
                game_result = String(game_01)+':'+String(game_02);
                if (game_01 == 6 && game_02 < 5){
                    alert('比赛结束');
                    clear_set_point();
                    $("input[name='result']").val(game_result);
                    $("input[name='winner']").val($("#name_player01").val());
                    var now = year+'-'+getNow(month)+'-'+getNow(date)+' '+getNow(h)+':'+getNow(m)+':'+getNow(s);
                    $("input[name='date']").val(now);
                    for ( var i=0;i<arr_total.length;i++){
                        document.write('局数：'+arr_total[i]['局数']+'<br>');
                        document.write('发球方：'+arr_total[i]['发球方']+'<br>');
                        document.write('比分：'+String(arr_total[i]['比分']).split(",")+'<br>');
                    }
                }else if (game_01 ==7 && game_02 ==5){
                    alert('比赛结束');
                    clear_set_point();
                    $("input[name='result']").val(game_result);
                    $("input[name='winner']").val($("#name_player01").val());
                    var now = year+'-'+getNow(month)+'-'+getNow(date)+' '+getNow(h)+':'+getNow(m)+':'+getNow(s);
                    $("input[name='date']").val(now);
                }else if (game_01 ==6 && game_02 ==6){
                    alert('进入抢七！');
                    //进入抢七
                }
            }
            function winAGame02(){
                $("#game_add_02").click();
                var arr_game_info = [];
                game = game_01+game_02;
                server = serve_player();
                game_arr = arr_game;
                arr_game_info['局数']=game;
                arr_game_info['发球方']=server;
                arr_game_info['比分']=game_arr;
                arr_total.push(arr_game_info);
                game_result = String(game_01)+':'+String(game_02);
                if (game_02 == 6 && game_01 < 5){
                    alert('比赛结束');
                    clear_set_point();
                    var now = year+'-'+getNow(month)+'-'+getNow(date)+' '+getNow(h)+':'+getNow(m)+':'+getNow(s);
                    $("input[name='date']").val(now);
                    $("input[name='result']").val(game_result);
                    $("input[name='winner']").val($("#name_player02").val());
                }else if (game_02 ==7 && game_01 == 5){
                    alert('比赛结束');
                    clear_set_point();
                    $("input[name='result']").val(game_result);
                    $("input[name='winner']").val($("#name_player02").val());
                    var now = year+'-'+getNow(month)+'-'+getNow(date)+' '+getNow(h)+':'+getNow(m)+':'+getNow(s);
                    $("input[name='date']").val(now);
                }else if (game_02 ==6 && game_01 ==6){
                    alert("进入抢七！");
                    //进入抢七
                }
            }
            function clear_point(){
                $("#points_01").text(0);
                point1 = 0;
                $("#points_02").text(0);
                point2 = 0;
            }

            function clear_set_point(){
                $("#game_01").text(0);
                game_01 = 0;
                $("#game_02").text(0);
                game_02 = 0;
            }

            $("#sub_btn01").click(function () {
                //隐藏队员姓名信息登记模块
                $(".count_module_head").toggle();
                $("#stop").toggle();
                //显示统计比赛数据的比分
                $("#data_cal").toggle();
                //展示分数板
                $("#score").toggle();
                var name01 = $("#name_player01").val();
                var name02 = $("#name_player02").val();
                $("#name01_display").append("<b>"+name01+"<b>");
                $("#name02_display").append("<b>"+name02+"<b>");
                $("input[name='player01_name']").val(name01);
                $("input[name='player02_name']").val(name02);
            })
            $("#stop").click(function () {
                if (confirm("确定终止计分？")){
                    //展示队员姓名登记模块
                    $(".count_module_head").toggle();
                    //隐藏分数板
                    $("#score").toggle();
                }else{
                    return false;
                }
            })

            //确定谁是发球方
            function serve_player() {
                var serve_player = null;
                var serve_first_player = null;
                var serve_first_label = String($("#serve_first").val());
                //alert(serve_first_label);
                if (serve_first_label == 'player01'){
                    serve_first_player = $("#name_player01").val();
                }else {
                    serve_first_player = $("#name_player02").val();
                }
                game = game_01+game_02;
                //alert(game);
                var player01 = String($("#name_player01").val());
                var player02 = String($("#name_player02").val());
                if (serve_first_player == player01){
                    if (game %2 !=0){
                        serve_player = player01;
                    }else {
                        serve_player = player02;
                    }
                }else {
                    if (game %2 !=0){
                        serve_player = player02;
                    }else {
                        serve_player = player01;
                    }
                }
                return serve_player;
            }
            var arr_game = new Array();
            var point1 = $("#points_01").val();
            $("#point_plus_01").click(function () {
                if (game_01 ==6 && game_02 ==6){
                    point1 = Number(point1);
                    point1 = point1+1;
                    var bais = Number(point1)-Number(point2);
                    $("#points_01").text(point1);
                    arr_game.push(point1+':'+point2);
                    game_result = String(7)+':'+String(6)+'('+point2+')';
                    if (point1 ==7 && point2 <6){
                        alert('比赛结束！');
                        alert(arr_game);
                        $("input[name='result']").val(game_result);
                        $("input[name='winner']").val($("#name_player01").val());
                        var now = year+'-'+getNow(month)+'-'+getNow(date)+' '+getNow(h)+':'+getNow(m)+':'+getNow(s);
                        $("input[name='date']").val(now);
                        arr_game = new Array();
                    }else if (point1 >7 && bais ==2 ){
                        alert('比赛结束!');
                        alert(arr_game);
                        var now = year+'-'+getNow(month)+'-'+getNow(date)+' '+getNow(h)+':'+getNow(m)+':'+getNow(s);
                        $("input[name='date']").val(now);
                        $("input[name='result']").val(game_result);
                        $("input[name='winner']").val($("#name_player01").val());
                        arr_game = new Array();
                    }
                }else{
                if (point1 == 0){
                    $("#points_01").text(15);
                    point1 = 15;
                    arr_game.push(point1+':'+point2);
                }else if(point1 == 15){
                    $("#points_01").text(30);
                    point1 = 30;
                    arr_game.push(point1+':'+point2);
                }else if (point1 == 30){
                    $("#points_01").text(40);
                    point1 = 40;
                    arr_game.push(point1+':'+point2);
                }else if (point1 == 40){
                    if (point2 != 'Ad' && point2 != 40){
                        //本局比赛结束
                        arr_game.push('--:--');
                        winAGame01();
                        alert(arr_game);
                        clear_point();
                        arr_game = new Array();
                    }else if(point2 == 40){
                        $("#points_01").text('Ad');
                        point1 = 'Ad';
                        arr_game.push(point1+':'+point2);
                    }else {
                        $("#points_01").text(40);
                        $("#points_02").text(40);
                        point2 = 40;
                        arr_game.push(point1+':'+point2);
                    }
                }else if (point1 =='Ad'){
                    //本局比赛结束
                    arr_game.push('--:--');
                    winAGame01();
                    alert(arr_game);
                    clear_point();
                    arr_game = new Array();
                }}
            })
            $("#point_minus_01").click(function () {
                if (game_01 ==6&game_02 ==6){
                    point1 = Number(point1);
                    point1 = point1-1;
                    arr_game.pop();
                    $("#points_01").text(point1);
                }else{
                if (point1 == 'Ad'){
                    $("#points_01").text(40);
                    point1 = 40;
                    arr_game.pop();
                }else if(point1 == 40){
                    $("#points_01").text(30);
                    point1 = 30;
                    arr_game.pop();
                }else if (point1 == 30){
                    $("#points_01").text(15);
                    point1 = 15;
                    arr_game.pop();
                }else if (point1 == 15){
                    $("#points_01").text(0);
                    point1 = 0;
                    arr_game.pop();
                }}
            })
            var point2 = $("#points_02").val();
            $("#point_plus_02").click(function () {
                if (game_01 ==6&&game_02 ==6){
                    point2 = Number(point2);
                    point2 = point2+1;
                    var bais = Number(point2)-Number(point1);
                    $("#points_02").text(point2);
                    arr_game.push(point1+':'+point2);
                    game_result = String(6)+'('+point1+')'+':'+String(7);
                    if (point2 ==7 && point1 <6){
                        alert('比赛结束！');
                        alert(arr_game);
                        $("input[name='result']").val(game_result);
                        $("input[name='winner']").val($("#name_player02").val());
                        var now = year+'-'+getNow(month)+'-'+getNow(date)+' '+getNow(h)+':'+getNow(m)+':'+getNow(s);
                        $("input[name='date']").val(now);
                        arr_game = new Array();
                    }else if (point2 >7 && bais ==2){
                        alert('比赛结束!');
                        alert(arr_game);
                        $("input[name='result']").val(game_result);
                        $("input[name='winner']").val($("#name_player02").val());
                        var now = year+'-'+getNow(month)+'-'+getNow(date)+' '+getNow(h)+':'+getNow(m)+':'+getNow(s);
                        $("input[name='date']").val(now);
                        arr_game = new Array();
                    }
                }else{
                if (point2 == 0){
                    $("#points_02").text(15);
                    point2 = 15;
                    arr_game.push(point1+':'+point2);
                }else if(point2 == 15){
                    $("#points_02").text(30);
                    point2 = 30;
                    arr_game.push(point1+':'+point2);
                }else if (point2 == 30){
                    $("#points_02").text(40);
                    point2 = 40;
                    arr_game.push(point1+':'+point2);
                }else if (point2 == 40){
                    if (point1 != 'Ad' && point1 != 40){
                        //本局比赛结束
                        arr_game.push('--:--');
                        winAGame02();
                        alert(arr_game);
                        clear_point();
                        arr_game = new Array();
                    }else if(point1 == 40){
                        $("#points_02").text('Ad');
                        point2 = 'Ad';
                        arr_game.push(point1+':'+point2);
                    }else {
                        $("#points_02").text(40);
                        $("#points_01").text(40);
                        point1 = 40;
                        arr_game.push(point1+':'+point2);
                    }
                }else if (point2 =='Ad'){
                    //本局比赛结束
                    arr_game.push('--:--');
                    winAGame02();
                    alert(arr_game);
                    clear_point();
                    arr_game = new Array();
                }}
            })
            $("#point_minus_02").click(function () {
                if (game_01 ==6&&game_02 ==6){
                    point2 = Number(point2);
                    point2 = point2-1;
                    arr_game.pop();
                    $("#points_02").text(point2);
                }else {
                if (point2 == 'Ad'){
                    $("#points_02").text(40);
                    point2 = 40;
                    arr_game.pop();
                }else if(point2 == 40){
                    $("#points_02").text(30);
                    point2 = 30;
                    arr_game.pop();
                }else if (point2 == 30){
                    $("#points_02").text(15);
                    point2 = 15;
                    arr_game.pop();
                }else if (point2 == 15){
                    $("#points_02").text(0);
                    point2 = 0;
                    arr_game.pop();
                }}
            })
            var game_01 = Number($("#game_01").val());
            $("#game_add_01").click(function () {
                game_01 = game_01 +1;
                $("#game_01").text(game_01);
            })
            $("#game_del_01").click(function () {
                game_01 = game_01 -1;
                $("#game_01").text(game_01);
                arr_total.pop();
            })
            var game_02 = Number($("#game_02").val());
            $("#game_add_02").click(function () {
                game_02 = game_02 +1;
                $("#game_02").text(game_02);
            })
            $("#game_del_02").click(function () {
                game_02 = game_02 -1;
                $("#game_02").text(game_02);
                arr_total.pop();
            })

            $("#modefy_set").click(function () {
                $(".set_point_mode").toggle();
                $("#modefy_set").toggle();
                $("#modefy_set_comfirm").toggle();
            })

            $("#modefy_set_comfirm").click(function () {
                $(".set_point_mode").toggle();
                $("#modefy_set").toggle();
                $("#modefy_set_comfirm").toggle();
            })

            $("#data_cal").click(function () {
                //数据统计部分
                //ace
                var ace01 = parseInt($("#ace_num_01_input").val());
                var ace02 = parseInt($("#ace_num_02_input").val());
                $("td[name='ace01']").text(ace01);
                $("td[name='ace02']").text(ace02);
                //双误
                var df01 = parseInt($("#double_fault_01_input").val());
                var df02 = parseInt($("#double_fault_02_input").val());
                $("td[name='df01']").text(df01);
                $("td[name='df02']").text(df02);
                //break points won 需要数据统计

                //winners
                var base_winners01 = parseInt($("#winner_base_line_01_input").val());
                var base_winners02 = parseInt($("#winner_base_line_02_input").val());
                var net_winners01 = parseInt($("#winner_net_01_input").val());
                var net_winners02 = parseInt($("#winner_net_02_input").val());
                $("td[name='winners01']").text(base_winners01+net_winners01);
                $("td[name='winners02']").text(base_winners02+net_winners02);
                //Unforced errors
                var base_ue01 = parseInt($("#ue_base_line_01_input").val());
                var base_ue02 = parseInt($("#ue_base_line_02_input").val());
                var net_ue01 = parseInt($("#ue_net_01_input").val());
                var net_ue02 = parseInt($("#ue_net_02_input").val());
                $("td[name='unforced_errors01']").text(base_ue01+net_ue01);
                $("td[name='unforced_errors02']").text(base_ue02+net_ue02);
                //net points won
                var net_fe01 = parseInt($("#fe_base_line_01_input").val());
                var net_fe02 = parseInt($("#fe_base_line_02_input").val());
                var netpoints01 = net_ue01+net_fe01+net_winners01;
                var netpoints02 = net_ue02+net_fe02+net_winners02;
                $("td[name='net_points_won01']").text(net_winners01+'/'+netpoints01);
                $("td[name='net_points_won02']").text(net_winners02+'/'+netpoints02);
                //total points win
                var serve_won01 = parseInt($("#serve_win_01_input").val());
                var serve_won02 = parseInt($("#serve_win_02_input").val());
                var base_fe01 = parseInt($("#fe_base_line_01_input").val());
                var base_fe02 = parseInt($("#fe_base_line_02_input").val());
                var total_points_won01 = net_winners01+base_winners01+ace01+serve_won01+df02+net_fe02+net_ue02+base_ue02+base_fe02;
                var total_points_won02 = net_winners02+base_winners02+ace02+serve_won02+df01+net_fe01+net_ue01+base_ue01+base_fe01;
                $("td[name='total_points_won01']").text(total_points_won01);
                $("td[name='total_points_won02']").text(total_points_won02);
                $("#data_analyse").toggle();
                $("#score").toggle();
                $("#data_cal").toggle();
                $("#back_to_data_cal").toggle();
                var name01 = $("#name_player01").val();
                var name02 = $("#name_player02").val();
                $("th[name='player01']").text(name01);
                $("th[name='player02']").text(name02);
                // post div中的内容
                $("input[name='ace']").val(String(ace01)+':'+String(ace02));
                $("input[name='serve_won']").val(String(serve_won01)+':'+String(serve_won02));
                $("input[name='double_faults']").val(String(df01)+':'+String(df02));
                $("input[name='base_line_ue']").val(String(base_ue01)+':'+String(base_ue02));
                $("input[name='base_line_fe']").val(String(base_fe01)+':'+String(base_fe02));
                $("input[name='base_line_winners']").val(String(base_winners01)+':'+String(base_winners02));
                $("input[name='net_ue']").val(String(net_ue01)+':'+String(net_ue02));
                $("input[name='net_fe']").val(String(net_fe01)+':'+String(net_fe02));
                $("input[name='net_winners']").val(String(net_winners01)+':'+String(net_winners02));
                $("input[name='total_points_won']").val(String(total_points_won01)+':'+String(total_points_won02));
            })

            $("#back_to_data_cal").click(function () {
                $("#data_analyse").toggle();
                $("#score").toggle();
                $("#data_cal").toggle();
                $("#back_to_data_cal").toggle();
            })

        })
    </script>
</head>
<body>
    <div id="login_header">
        <img class="logo_img" alt="" src="../static/img/logo.jfif">
        <span class="wel_word">计分模块</span>
        <div>
            <a href="../index.jsp">返回首页</a>
            <a href="" id="stop" style="display: none">停止计分</a>
            <a id="data_cal" style="display: none;" href="#">查看比赛数据统计</a>
            <a id="back_to_data_cal" style="display: none;" href="#">返回比赛计分栏</a>
        </div>
    </div>
    <div id="login_header01" class="count_module_head" style="height: 450px">
        <h4>请输入参赛双方的姓名：</h4>
        <div id="r_content">
            <form>
                <label name="player01">player01姓名：</label>
                <input class="playertxt" type="text" placeholder="请输入选手姓名" id="name_player01" autocomplete="off" tabindex="1">
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <label>player02姓名：</label>
                <input class="playertxt" type="text" placeholder="请输入选手姓名" id="name_player02" autocomplete="off" tabindex="1">
                &nbsp;&nbsp;&nbsp
                <label>请选择赛制：</label>
                <select class="playertxt">
                    <option value="four_games_noad">四局无占先</option>
                    <option value="four_games_ad">四局有占先</option>
                    <option value="six_games_noad">六局无占先</option>
                    <option value="six_games_ad">六局有占先</option>
                </select>
                &nbsp;&nbsp;&nbsp;
                <label>请选择首局发球选手：</label>
                <select class="playertxt" id="serve_first">
                    <option value="player01">player01</option>
                    <option value="player02">player02</option>
                </select>
            </form>
        </div>
        <input type="submit" value="确定" id="sub_btn01">
    </div>
    <div id="score" style="position: relative;text-align: center;width: 1200px;height: 500px;margin: 0 auto;border: 4px solid purple;display: none;" >
        <div id="score_board" style="margin-top: 10px;margin-left:100px;text-align: center;border: 2px solid black;width: 1000px;height: 230px">
            <div class="ad_de_button" style="float: left;margin-top: 10px;margin-left:10px;width: 100px;height: 160px">
                <button id="point_plus_01" style="width: 60px;height: 60px;font-size: 40px;margin-top: 10px;">+</button>
                <button id="point_minus_01" style="width: 60px;height: 60px;font-size: 40px;margin-top: 10px;">-</button>
            </div>
            <div class="points" style="float: left;margin-top: 10px;margin-left:35px;border: 2px solid black;width: 700px;height: 210px">
                <div class="game_point" style="margin-top: 10px;margin-left: 10px;width: 680px;height: 100px">
                    <div style="float: left;margin-left: 155px;width: 100px;height: 70px;margin-top: 5px;">
                        <span id="points_01" style="font-size: 70px;color: blue">0</span>
                    </div>
                    <div style="float: left;margin-left: 10px;width: 100px;height: 70px;margin-top: 5px;">
                        <span style="font-size: 70px;color: blue">:</span>
                    </div>
                    <div style="float: left;margin-left: 10px;width: 100px;height: 70px;margin-top: 5px;">
                        <span id="points_02" style="font-size: 70px;color: blue">0</span>
                    </div>
                </div>
                <div class="set_point" style="text-align: center;margin-top: 10px;margin-left: 250px;width: 250px;height: 30px">
                    <button id="modefy_set">修改大比分</button>
                    <button id="modefy_set_comfirm" style="display: none">确定修改</button>
                    <div style="float: left;margin-left: 20px;width: 30px;height: 70px">
                        <button id="game_add_01" class="set_point_mode" style="display: none">+</button>
                        <span id="game_01" style="font-size: 30px;color: black;">0</span>
                        <button id="game_del_01" class="set_point_mode" style="display: none">-</button>
                    </div>
                    <div style="float: left;margin-left: 5px;width: 30px;height: 70px">
                        <div class="set_point_mode" style="display: none"><br></div>
                        <span style="font-size: 30px;color: black">-</span>
                        <div class="set_point_mode" style="display: none"><br></div>
                    </div>
                    <div style="float: left;margin-left: 5px;width: 30px;height: 70px">
                        <button id="game_add_02" class="set_point_mode" style="display: none">+</button>
                        <span id="game_02" style="font-size: 30px;color: black">0</span>
                        <button id="game_del_02" class="set_point_mode" style="display: none">-</button>
                    </div>
                </div>
            </div>
            <div class="ad_de_button" style="margin-top: 10px;margin-left: 880px;width: 100px;height: 160px">
                <button id="point_plus_02" style="width: 60px;height: 60px;font-size: 40px;margin-top: 10px;">+</button>
                <button id="point_minus_02" style="width: 60px;height: 60px;font-size: 40px;margin-top: 10px;">-</button>
            </div>
        </div>
        <div id="player01_area" style="float: left;margin-left: 10px;width: 550px;height: 220px;margin-top: 10px;border: 2px solid black;">
            <div id="player01_name" style="float: left;margin-left: 10px;width: 100px;height: 200px;margin-top: 10px;border: 2px solid black;">
                <span style="font-size: 25px">姓名：</span>
                <br>
                <span id="name01_display" style="writing-mode: vertical-lr;font-size: 25px;color: blue;margin-top: 30px;"></span>
            </div>
            <div id="score_player01">
                <div name="serve_win">
                    <span id="match_data">发球直得：</span>
                    <input id="serve_win_01_input" type="number" min="1" step="1" value="0" style="width: 50px">
                </div>
                <div name="ace">
                    <span id="match_data">ACE数量：</span>
                    <input id="ace_num_01_input" type="number" min="1" step="1" value="0" style="width: 50px">
                </div>
                <div name="double_fault">
                    <span id="match_data">双误：</span>
                    <input id="double_fault_01_input" type="number" min="1" step="1" value="0" style="width: 50px">
                </div>
                <div name="ue_base_line">
                    <span id="match_data">底线非受迫性失误：</span>
                    <input id="ue_base_line_01_input" type="number" min="1" step="1" value="0" style="width: 50px">
                </div>
                <div name="fe_base_line">
                    <span id="match_data">底线受迫性失误：</span>
                    <input id="fe_base_line_01_input" type="number" min="1" step="1" value="0" style="width: 50px">
                </div>
                <div name="winner_base_line">
                    <span id="match_data">底线制胜分：</span>
                    <input id="winner_base_line_01_input" type="number" min="1" step="1" value="0" style="width: 50px">
                </div>
                <div name="ue_net">
                    <span id="match_data">网前非受迫性失误：</span>
                    <input id="ue_net_01_input" type="number" min="1" step="1" value="0" style="width: 50px">
                </div>
                <div name="fe_net">
                    <span id="match_data">网前受迫性失误：</span>
                    <input id="fe_net_01_input" type="number" min="1" step="1" value="0" style="width: 50px">
                </div>
                <div name="winner_net">
                    <span id="match_data">网前制胜分：</span>
                    <input id="winner_net_01_input" type="number" min="1" step="1" value="0" style="width: 50px">
                </div>
            </div>
        </div>
        <div id="player02_area" style="float: left;margin-left: 60px;width: 550px;height: 220px;margin-top: 10px;border: 2px solid black;">
            <div id="player02_name" style="float: left;margin-left: 10px;width: 100px;height: 200px;margin-top: 10px;border: 2px solid black;">
                <span style="font-size: 25px">姓名：</span>
                <br>
                <span id="name02_display" style="writing-mode: vertical-lr;font-size: 25px;color: blue;margin-top: 30px;"></span>
            </div>
            <div id="score_player02">
                <div name="serve_win">
                    <span id="match_data">发球直得：</span>
                    <input id="serve_win_02_input" type="number" min="1" step="1" value="0" style="width: 50px">
                </div>
                <div name="ace">
                    <span id="match_data">ACE数量：</span>
                    <input id="ace_num_02_input" type="number" min="1" step="1" value="0" style="width: 50px">
                </div>
                <div name="double_fault">
                    <span id="match_data">双误：</span>
                    <input id="double_fault_02_input" type="number" min="1" step="1" value="0" style="width: 50px">
                </div>
                <div name="ue_base_line">
                    <span id="match_data">底线非受迫性失误：</span>
                    <input id="ue_base_line_02_input" type="number" min="1" step="1" value="0" style="width: 50px">
                </div>
                <div name="fe_base_line">
                    <span id="match_data">底线受迫性失误：</span>
                    <input id="fe_base_line_02_input" type="number" min="1" step="1" value="0" style="width: 50px">
                </div>
                <div name="winner_base_line">
                    <span id="match_data">底线制胜分：</span>
                    <input id="winner_base_line_02_input" type="number" min="1" step="1" value="0" style="width: 50px">
                </div>
                <div name="ue_net">
                    <span id="match_data">网前非受迫性失误：</span>
                    <input id="ue_net_02_input" type="number" min="1" step="1" value="0" style="width: 50px">
                </div>
                <div name="fe_net">
                    <span id="match_data">网前受迫性失误：</span>
                    <input id="fe_net_02_input" type="number" min="1" step="1" value="0" style="width: 50px">
                </div>
                <div name="winner_net">
                    <span id="match_data">网前制胜分：</span>
                    <input id="winner_net_02_input" type="number" min="1" step="1" value="0" style="width: 50px">
                </div>
            </div>
        </div>
    </div>
    <div id="data_analyse" style="display:none;border: 4px solid purple;text-align: center;width: 1200px;height: 630px;margin: 0 auto;">
        <br>
        <table id="data_table" border="1" style="margin: 0 auto">
            <tr>
                <th id="title" name="player01"></th>
                <th id="title">比分</th>
                <th id="title" name="player02"></th>
            </tr>
            <tr>
                <td name="ace01"></td>
                <th id="sub_title">Ace</th>
                <td name="ace02"></td>
            </tr>
            <tr>
                <td name="df01"></td>
                <th id="sub_title">Double Faults</th>
                <td name="df02"></td>
            </tr>
            <tr>
                <td name="break_point_won01"></td>
                <th id="sub_title">Break Point Won</th>
                <td name="break_point_won02"></td>
            </tr>
            <tr>
                <td name="winners01"></td>
                <th id="sub_title">Winners</th>
                <td name="winners02"></td>
            </tr>
            <tr>
                <td name="unforced_errors01"></td>
                <th id="sub_title">Unforced Errors</th>
                <td name="unforced_errors02"></td>
            </tr>
            <tr>
                <td name="net_points_won01"></td>
                <th id="sub_title">Net Points Won</th>
                <td name="net_points_won02"></td>
            </tr>
            <tr>
                <td name="total_points_won01"></td>
                <th id="sub_title">Total Points Won</th>
                <td name="total_points_won02"></td>
            </tr>
        </table>
        <br>
        <input type="submit" value="保存至数据库" id="save_to_mysql" style="background-color: purple;border: none;color: #fff;width: 160px;height: 40px;font-size: 22px;margin: 0 auto;">
    </div>
    <div id="bottom" style="width: 1500px;text-align: center">
      <span id="bottom01">
        南京大学网球队.Copyright &copy;2021
      </span>
    </div>
    <div id="submit_form">
        <form action="" method="post">
            <label>player01_name:</label>
            <input type="text" name="player01_name">
            <label>player02_name:</label>
            <input type="text" name="player02_name">
            <label>result:</label>
            <input type="text" name="result">
            <label>winner:</label>
            <input type="text" name="winner">
            <label>scores:</label>
            <input type="text" name="scores">
            <label>date:</label>
            <input type="text" name="date">
            <label>ace:</label>
            <input type="text" name="ace">
            <label>serve_won:</label>
            <input type="text" name="serve_won">
            <label>double_faults:</label>
            <input type="text" name="double_faults">
            <label>base_line_ue:</label>
            <input type="text" name="base_line_ue">
            <label>base_line_fe:</label>
            <input type="text" name="base_line_fe">
            <label>base_line_winners:</label>
            <input type="text" name="base_line_winners">
            <label>net_ue:</label>
            <input type="text" name="net_ue">
            <label>net_fe:</label>
            <input type="text" name="net_fe">
            <label>net_winners:</label>
            <input type="text" name="net_winners">
            <label>total_points_won:</label>
            <input type="text" name="total_points_won">
            <input type="submit" value="提交" id="sub_btn02">
        </form>
    </div>
</body>
</html>
